import type { Preset, SourceCodeTransformer } from 'unocss';
import { defineConfig, presetAttributify, presetIcons, transformerDirectives, transformerVariantGroup } from 'unocss';
import { presetApplet, presetRemRpx, transformerAttributify } from 'unocss-applet';

const isApplet = process.env?.UNI_PLATFORM?.startsWith('mp-') ?? false;
const presets: Preset[] = [];
const transformers: SourceCodeTransformer[] = [];

if (isApplet) {
  /**
   * UnoCSS Applet
   * @see https://github.com/unocss-applet/unocss-applet
   */
  presets.push(presetApplet());
  presets.push(presetRemRpx()); // 如果需要使用 rem 转 rpx 单位，需要启用此插件
  transformers.push(transformerAttributify({ ignoreAttributes: ['block'], deleteAttributes: false }));
} else {
  presets.push(presetApplet());
  presets.push(presetAttributify());
  presets.push(presetRemRpx({ mode: 'rpx2rem' }));
}

export default defineConfig({
  presets: [
    presetIcons({
      scale: 1.2,
      warn: true,
      extraProperties: {
        display: 'inline-block',
        'vertical-align': 'middle',
      },
    }),
    ...presets,
  ],
  shortcuts: {
    'c-bg': 'bg-[#ffc300]',
    'c-color': 'color-[#ffc300]',
    'c-bg-sec': 'bg-[#ea622c]',
    'c-color-sec': 'color-[#ea622c]',
    'c-color-black': 'text-#323233',
    'c-pd': 'p-[12px] box-border',
    'c-text-8': 'text-[8px]',
    'c-text-10': 'text-[10px]',
    'c-text-12': 'text-[12px]',
    'c-text-14': 'text-[14px]',
    'c-text-16': 'text-[16px]',
    'c-text-color-grey': 'text-[#9C9C9E]',
    'c-text-ellipsis': 'truncate overflow-hidden text-ellipsis whitespace-nowrap',
    'c-text-ellipsis-2': 'overflow-hidden text-ellipsis break-words line-clamp-2',
    'c-text-ellipsis-3': 'overflow-hidden text-ellipsis break-words line-clamp-3',
    'c-br': 'rounded-[8px]',
  },
  transformers: [
    transformerDirectives(), // 启用 @apply 功能
    transformerVariantGroup(), // 启用 () 分组功能
    ...transformers,
  ],
  rules: [
    [
      'p-safe',
      {
        padding: 'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
      },
    ],
    ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
    ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
    ['mr-2', { 'margin-right': '2px' }],
    ['shadow-top-only', { 'box-shadow': '0px -2px 4px rgba(0, 0, 0, 0.3)' }],
  ],
});
